<template>
  <div>
    <div class="swiper gallery-top" ref="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item, index) in tipList" :key="index">
          <div class="tip" @click="setSelectedComponent(item.name)" :class="{ active: activeTab === item.name }">
            <div class="tip_title">{{ item.title }}</div>
            <div>
              <Progress :width="600" :progress="parseFloat(((item.completed / item.total) * 100).toFixed(2))
                " :strokeWidth="10" :showInfo="true" />
            </div>
            <div class="tip_info">
              <span>进度</span>：{{ item.completed }} / {{ item.total }}
            </div>
            <div class="tip_info"><span>创建时间</span>：{{ item.time }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="grid-content">
      <div class="grid-content__box">
        <transition :duration="200" name="component-fade" mode="out-in">
          <keep-alive>
            <component :is="components[activeTab]"></component>
          </keep-alive>
        </transition>
      </div>
    </div>
  </div>
</template>

<script setup>

import Swiper from 'swiper'
import 'swiper/swiper-bundle.css'

import ComponentA from "./data/table1"
import ComponentB from "./data/table2"
import ComponentC from "./data/table3"
import ComponentD from "./data/table4"
import ComponentE from "./data/table5"
import Progress from "./progress"
const components = {
  ComponentA,
  ComponentB,
  ComponentC,
  ComponentD,
  ComponentE,
}
const activeTab = ref('ComponentA')
function setSelectedComponent(tab) {
  activeTab.value = tab
}
const tipList = ref([{
  title: "可改进指标项数",
  name: "ComponentA",
  completed: "10020",
  total: "38023",
  time: "2023-12-20 16:01:22",
}, {
  title: "较难达标项数",
  name: "ComponentB",
  completed: "20020",
  total: "38023",
  time: "2023-12-20 16:01:22",
},
{
  title: "待讨论改进项数",
  name: "ComponentC",
  completed: "16020",
  total: "38023",
  time: "2023-12-20 16:01:22",
},
{
  title: "满分指标项数",
  name: "ComponentD",
  completed: "22020",
  total: "38023",
  time: "2023-12-20 16:01:22",
},
{
  title: "其他指标系数",
  name: "ComponentE",
  completed: "10020",
  total: "38023",
  time: "2023-12-20 16:01:22",
}])
onMounted(() => {
  var swiper = new Swiper(".gallery-top", {
    spaceBetween: 0,
    slidesPerView: 4.5,
    freeMode: true,
    watchSlidesProgress: true,
    slideToClickedSlide: true,
    breakpoints: {
      320: {
        slidesPerView: 1.5,
        spaceBetween: 0
      },
      768: {
        slidesPerView: 2.5,
        spaceBetween: 0
      },
      1280: {
        slidesPerView: 3.3,
        spaceBetween: 0
      },
      1440: {
        slidesPerView: 3.8,
        spaceBetween: 0
      },
      1600: {
        slidesPerView: 4.5,
        spaceBetween: 0
      },
      1920: {
        slidesPerView: 4.5,
        spaceBetween: 0
      }
    }
  })
})
</script>

<style lang="scss" scoped>
.swiper {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.swiper-slide {
  background-size: cover;
  background-position: center;
}

.gallery-top {
  width: 100%;
  height: 140px;
  margin: 12px 0;
  padding: 12px 0;
}

.tip {
  width: calc(100% - 12px);
  height: 100%;
  background: #fff;
  color: #333;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  box-shadow: 0 0 12px #dbe7fd;
  margin: auto;
  padding: 16px;
  box-sizing: border-box;

  &.active {
    background: linear-gradient(0deg, #60b6ff, #0783ff);
    color: #fff;

    &:after {
      content: "";
      position: absolute;
      bottom: -10px;
      margin: auto;
      left: 0;
      right: 0;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-top: 10px solid #60b6ff;
      z-index: 0;
    }
  }

  .tip_title {
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    padding-bottom: 6px;
  }

  .tip_info {
    font-size: 13px;
    line-height: 20px;

    span {
      width: 54px;
      display: inline-block;
      text-align: justify;
      text-align-last: justify;
    }
  }
}

.component-fade-enter-active,
.component-fade-leave-active {
  transition: opacity .3s ease;
}

.component-fade-enter,
.component-fade-leave-to

/* .component-fade-leave-active for below version 2.1.8 */
  {
  opacity: 0;
}

.grid-content {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 12px #dbe7fd;

  .grid-content__box {
    padding: 16px 20px;
  }
}
</style>
